<template>
	<div>
		<div class='prizeDrawSpace'>

		</div>
		<div class="prizeDraw">
			<div class="prizeDraw_top">
				<div class="prizeDraw_top_close">
					<div class class="prizeDraw_top_close_left">
						<!-- <image src="@/static/image/left.png" mode="" @click="backEvent()"></image> -->
					</div> 观看奖励 <image src="@/static/image/close.png" mode="" class="closeImg" @click="closeDialog()">
					</image>
				</div>
				<scroll-view @scrolltolower="scrolltolower" :style="{ height: scrollViewHeight + 'rpx' }" :scroll-y="true"
					:scroll-with-animation="true">
					<div class="prizeDraw_user_item" v-for="(ite, idx) in RedList" :key='idx'>
						<div class='prizeDraw_user_item_top'>
							<div v-if="ite.status === '进行中'" class="prizeDraw_user_item_top_left_btn_one">进行中</div>
							<div v-else-if="ite.status === '失效'"
								class="prizeDraw_user_item_top_left_btn_one_act prizeDraw_user_item_top_left_btn_one">
								已失效
							</div>
							<div v-else>-</div>
							<div class="prizeDraw_user_item_top_left_btn_two" v-if="ite.rewardType == 'random'">
								随机红包
							</div>
							<div class="prizeDraw_user_item_top_left_btn_two prizeDraw_user_item_top_left_btn_two_act"
								v-else-if="ite.rewardType == 'fixed'">
								固定红包
							</div>
							<div class="prizeDraw_user_item_top_left_btn_three" v-else-if="ite.rewardType == 'product'">
								商品
							</div>

							<!-- <div :class="ite.type == 2?'prizeDraw_user_item_top_left_btn_two prizeDraw_user_item_top_left_btn_two_act':'prizeDraw_user_item_top_left_btn_two' ">
							{{ite.type == 2?'拼手气红包':'普通红包'}}
						</div> -->
							<div class='prizeDraw_user_item_top_title ex'>
								{{ ite.name }}
							</div>
						</div>
						<!-- 	<div class="prizeDraw_items_cont_items">
						<div class="prizeDraw_items_cont_items_left">
							红包总金额：¥<div class="prizeDraw_items_cont_items_cont ex">{{ite.prizeName}}</div>
						</div>
					</div> -->

						<div class="prizeDraw_items_cont_items prizeDraw_items_cont_items_right">
							<div class="prizeDraw_items_cont_items_left">
								参与条件：<div class="prizeDraw_items_cont_items_left_a ex">{{ ite.duration }}分钟
								</div>
							</div>
							<div class="prizeDraw_items_cont_items_left textRight">
								奖励内容：<div class="prizeDraw_items_cont_items_left_a ex ">

									<div v-if="ite.rewardType == 'random'">
										<!-- {{ scope.row.amountMin }}~{{ scope.row.amountMax }}元 -->
										{{ (ite.amount / 100).toFixed(2) }}元
									</div>
									<div v-if="ite.rewardType == 'product'">
										{{ ite.rewardContent }}
									</div>
									<div v-if="ite.rewardType == 'fixed'">
										{{ (ite.amount / 100).toFixed(2) }}元
									</div>
								</div>
							</div>
						</div>
						<div class="prizeDraw_items_cont_items prizeDraw_items_cont_items_right">
							<div class="prizeDraw_items_cont_items_left">
								发放数量：<div class="prizeDraw_items_cont_items_left_a ex">{{ ite.recipientsRight }}
								</div>
							</div>
							<div class="prizeDraw_items_cont_items_left textRight">
								领取人数：<div class="prizeDraw_items_cont_items_left_a ex ">
									{{ ite.recipientsLeft }}
								</div>
							</div>
						</div>
						<div class="prizeDraw_items_cont_items">
							<div class="prizeDraw_items_cont_items_left timeCont ">
								创建时间：<div class="prizeDraw_items_cont_items_left_a ex ">{{ ite.createTime }}
								</div>
							</div>
						</div>
						<div class="prizeDraw_items_cont_items_btn" @click='receveEvent(ite)'>
							<image src="@/static/image/delete.png" mode=""></image>
							<div class="prizeDraw_items_cont_items_btn_text">
								领取记录
							</div>
							<div class='prizeDraw_items_cont_items_btn_text_right' v-if="ite.status == '进行中'"
								@click.stop='enableEvent(ite, false, idx)'>
								失效
							</div>
							<div :class='ite.status == "失效" ? "prizeDraw_items_cont_items_btn_text_right prizeDraw_items_cont_items_btn_text_right_opt" : "prizeDraw_items_cont_items_btn_text_right"'
								v-if="ite.status == '未开始' || ite.status == '失效'"
								@click.stop='ite.status == "失效" ? deleteEvent(ite, idx) : enableEvent(ite, true, idx)'>
								删除
							</div>
						</div>
					</div>

					<div class="listSpace" v-if="RedList.length <= 0 && loading">
						<list-space></list-space>
					</div>
					<div class=" zj_space">
					</div>
					<div class=" zj_space">
					</div>
					<div class=" zj_space">
					</div>


					<div class="zj_red_btn">
						<div class="zj_red_btn_cont" @click='sendRed()'>
							添加观看奖励
						</div>
					</div>

				</scroll-view>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	filters: {
		formatDate(v) {
			const value = v * 1000
			const data = new Date(value);
			const month = data.getMonth() + 1;
			const day = data.getDate();
			const year = data.getFullYear();
			const hours = data.getHours();
			const minutes = data.getMinutes();
			const seconds = data.getSeconds();
			const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			return formattedTime;
		}
	},
	data() {
		return {
			params: {
				page: 1,
				pageSize: 10,
				liveId: '1802665486547161088'
			},
			RedList: [],
			scrollViewHeight: 882,
			total: 0,
			loading: false,
			Amount: 0, //余额
			isRefresh: false,
		}
	},
	onShow() {
		if (this.isRefresh) {
			this.RedList = []
			this.params.page = 1
			this.loading = false
			this.getDrawWinPrizeCustomer(1)
		}
	},
	onLoad(opt) {
		if (opt.liveId) {
			this.params.liveId = opt.liveId
		}
		this.getDrawWinPrizeCustomer()
	},
	onPullDownRefresh() {
		this.RedList = []
		this.params.page = 1
		this.loading = false
		this.getDrawWinPrizeCustomer()
	},
	methods: {
		closeDialog() {
			this.$utils.closeDialog(this)
			// uni.navigateBack()
		},
		scrolltolower(e) {
			if (this.RedList.length < this.total) {
				this.params.page++
				this.getDrawWinPrizeCustomer()
			} else {
				uni.showToast({
					title: '已到底',
					icon: 'none'
				})
			}
			console.log('e.detail.scrollTop', e.detail.scrollTop)
		},
		async getDrawWinPrizeCustomer(status) {
			const {
				data
			} = await this.$request(this.$Api.watchRewardList, this.params, "get")
			uni.stopPullDownRefresh()
			if (data.code != 200) return
			this.loading = true
			if (!data.data.list) return
			data.data.list.forEach((item) => {
				const recipients = item.recipients.split('/');
				item.recipientsLeft = recipients[0];
				item.recipientsRight = recipients[1];
			});
			if (status == 1) {
				this.RedList = data.data.list
			} else {
				this.RedList = this.RedList.concat(data.data.list)
			}
			this.total = data.data.total
		},
		// 中奖名单
		winnersEvemt(ite) {

		},
		// 查看红包记录
		receveEvent(ite) {
			uni.navigateTo({
				url: '/pages/watchReward/watchRewardCollectionRecord?activeName=' + ite.name + '&id=' + ite
					.id
			})

		},
		backEvent() {
			uni.navigateBack()
		},
		// 发红包
		// 上传图片
		sendRed(index) {
			this.isRefresh = false
			uni.navigateTo({
				url: '/pages/watchReward/sendWatchReward?liveId=' + this.params.liveId
			})
		},
		async enableEvent(ite, stauts, index) {
			console.log('enableEvent', ite.status == "失效")
			if (ite.status == "失效") return
			const {
				data
			} = await this.$request(this.$Api.watchRewardEnable, {
				id: ite.id,
				enabled: stauts
			}, "post")
			if (data.code != 200) return
			if (stauts == true) {
				this.$set(this.RedList[index], "status", '进行中')
				uni.showToast({
					title: '启用成功',
					icon: 'none'
				})
			} else {
				uni.showToast({
					title: '禁用成功',
					icon: 'none'
				})
				this.$set(this.RedList[index], "status", '失效')
				console.log('enableEvent', this.RedList[index], index)
			}
		},
		// 删除后不可恢复，不可查看活动信息，是否要删除活动
		deleteEvent(ite, idx) {
			uni.showModal({
				title: '提示',
				content: '删除后将无法恢复该观看奖励您确定删除吗?',
				success: async (res) => {
					console.log('res', res)
					if (res.confirm) {
						// drawActivityId: "1801106215296569344"
						const {
							data
						} = await this.$request(this.$Api.watchRewardDelete, {
							id: ite.id
						}, "POST")
						if (data.code !== 200) return
						// 执行软删除
						this.RedList.splice(idx, 1)
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})

					}
				}
			})
		},
		// watchRewardEnable
	}
}
</script>

<style lang="scss">
.prizeDraw {
	width: 100%;
	height: 992rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 0rpx 0rpx;
	overflow-y: hidden;
	// position: fixed;
	bottom: 0;
	left: 0;
	padding: 0 32rpx;
	box-sizing: border-box;
	color: #464C5B;
	font-size: 28rpx;


	.prizeDraw_top {
		width: 100%;
		height: 100rpx;
		position: relative;
		text-align: center;
		font-size: 32rpx;
		line-height: 100rpx;

		.prizeDraw_top_close {}


		.prizeDraw_top_close_left {
			position: absolute;
			left: 0;
			top: 10rpx;
			width: 44rpx;
			height: 44rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}


		.closeImg {
			position: absolute;
			right: 0;
			top: 32rpx;
			width: 32rpx;
			height: 32rpx;
		}

	}

	.prizeDraw_top_title {
		width: 100%;
		height: 80rpx;
		font-size: 28rpx;
		color: #464C5B;
		text-align: left;
		font-weight: 500;
		line-height: 80rpx;
	}

	.prizeDraw_user_item {
		width: 100%;
		// height: 310rpx;
		background: #F6F9FF;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
	}

	.prizeDraw_user_item_top {
		width: 100%;
		height: 80rpx;
		border-bottom: 1rpx solid #D7DDE4;
		display: flex;
		justify-content: flex-start;
		padding: 0 24rpx;
		box-sizing: border-box;
		align-items: center;
		font-size: 24rpx;
		color: #fff;

		.prizeDraw_user_item_top_left_btn_one {
			width: 104rpx;
			height: 46rpx;
			background: #00C795;
			border-radius: 8rpx;
			line-height: 46rpx;
			text-align: center;
			margin-right: 16rpx;

		}

		.prizeDraw_user_item_top_left_btn_one_act {
			background: #BFBFBF;
		}

		.prizeDraw_user_item_top_left_btn_two {
			min-width: 128rpx;
			height: 46rpx;
			background: #AEC0FE;
			border-radius: 8rpx;
			padding: 0 16rpx;
			box-sizing: border-box;
			line-height: 46rpx;
			margin-right: 16rpx;
		}

		.prizeDraw_user_item_top_left_btn_three {
			min-width: 80rpx;
			height: 46rpx;
			background: #FF8466;
			border-radius: 8rpx;
			padding: 0 16rpx;
			box-sizing: border-box;
			line-height: 46rpx;
			margin-right: 16rpx;

		}

		.prizeDraw_user_item_top_left_btn_two_act {
			background: #FF5A5F;
		}

		.prizeDraw_user_item_top_title {
			width: 360rpx;
			color: #464C5B;
			text-align: left
		}

	}

	.prizeDraw_items_cont_items {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40rpx;
		margin-top: 20rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		font-size: 24rpx;

		color: #8C8C8C;

		.prizeDraw_items_cont_items_left {
			width: 100%;
			display: flex;
			align-items: center;


			.color_blue {
				color: #295EFF;
			}

			.prizeDraw_items_cont_items_left_a {
				color: #464C5B;

			}

			.prizeDraw_items_cont_items_cont {
				width: 480rpx;
				text-align: left;
				color: #464C5B;
			}

		}

		.timeCont {
			min-width: 380rpx;

		}

		.textRight {
			text-align: left;
			// justify-content: flex-end;


		}

	}

	.prizeDraw_items_cont_items_right {
		// padding-left: 100rpx;
	}

	.prizeDraw_items_cont_items_btn {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 20rpx;
		box-sizing: border-box;

		image {
			width: 28rpx;
			height: 28rpx;
		}

		.prizeDraw_items_cont_items_btn_text {
			width: 96rpx;
			height: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #295EFF;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			margin-left: 12rpx;

		}

		.prizeDraw_items_cont_items_btn_text_right {
			width: 112rpx;
			height: 48rpx;
			border-radius: 8rpx;
			border: 2rpx solid #295EFF;
			text-align: center;
			line-height: 44rpx;
			color: #295EFF;
			font-size: 24rpx;
			margin-left: 20rpx;
		}

		.prizeDraw_items_cont_items_btn_text_right_opt {
			// opacity: 0.5;
			border: none;
			font-size: 24rpx;

		}
	}

	.zj_red_btn {
		width: 750rpx;
		height: 166rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		padding-bottom: 74rpx;
		bottom: 0;
		left: 0;

		.zj_red_btn_cont {
			width: 552rpx;
			height: 80rpx;
			background: #295FFF;
			border-radius: 46rpx;
			font-size: 32rpx;
			color: #fff;
			line-height: 80rpx;
		}
	}


}
</style>
